/// 页面 * 表单
<template>
  <Page>
    <div class="my-form">
      <ExForm v-bind="form.bind">
        <ExFormItem label="用户名" name="username" :rule="rule().len(10)">
          <AInput />
        </ExFormItem>
        <ExFormItem label="年龄" name="age" :rule="rule().limit(99)">
          <AInputNumber />
        </ExFormItem>

        <ExFormItem
          label="状态"
          name="status,statusName"
          fields="statusCode, statusNum:statusNumber"
        >
          <ASelect
            :options="[
              {
                value: 1,
                label: '启用',
                source: {
                  statusCode: '0000',
                  statusNumber: 110,
                },
              },
              {
                value: 2,
                label: '禁用',
                source: {
                  statusCode: '1000',
                  statusNumber: 111,
                },
              },
            ]"
            @change="
              (value) => {
                console.log(value)
              }
            "
          />
        </ExFormItem>

        <ExFormItem label="备注" name="remarks">
          <ATextarea show-count :maxlength="100" />
        </ExFormItem>
      </ExForm>
    </div>
    {{ form.getData() }}
    <br />
    <button
      @click="
        async () => {
          const data = form.getData(true)
          console.log(data)
          try {
            await form.api?.validateFields()
          } catch (err) {
            console.log(err)
          }
        }
      "
    >
      validate
    </button>
  </Page>
</template>

<script setup lang="tsx">
import { rule } from '@expresso/plus'

type ModelType = {
  username: string
  password: string
  age: number
  status: number
  statusName: string
  statusCode: string
  statusNum: number
  remarks: string
}

const form = useForm<ModelType>({
  model: { status: 1 },
})
</script>

<style scoped lang="scss">
.my-form {
  width: 600px;
  margin: 16px;
}
</style>
